<!-- #layout name=blank-->
<style>
  .cm-s-mdn-like {
    border: 1px solid #e5e5e5;
  }
</style>
<div id="app" v-cloak>
  <div class="page-header">
    <h1 class="title">Jobs</h1>
  </div>

  <kb-breadcrumb :breads="breads"></kb-breadcrumb>

  <ul class="nav nav-tabs">
    <li
      v-for="($data, $index) in tabTypes"
      :key="$index"
      :class="{active: $data.value == curTab }"
    >
      <a href="javascript:;" @click="changeTab($data.value)">{{
        $data.displayName
      }}</a>
    </li>
  </ul>

  <div class="navbar navbar-default" v-if="curTab == 'pending'">
    <div class="container-fluid">
      <div class="btn-group navbar-btn">
        <a class="btn green" href="javascript:;" @click="onShowJobDialog"
          >Add a job</a
        >
      </div>
      <a
        v-if="selectedJobs.length == 1"
        @click="onRun"
        class="btn green navbar-btn"
        >Run</a
      >
      <a
        v-if="selectedJobs.length > 0"
        @click="onDelete"
        class="btn red navbar-btn"
        >Delete</a
      >
    </div>
  </div>

  <kb-table
    :data="tableData"
    :show-select="true"
    :selected.sync="selectedJobs"
    v-if="curTab=='pending'"
    key="pending"
  >
    <kb-table-column
      :label="Kooboo.text.common.name"
      prop="name"
    ></kb-table-column>
    <kb-table-column label="Code name">
      <template v-slot="row">
        <span :class="['label', row.codeName.class]">{{
          row.codeName.text
        }}</span>
      </template>
    </kb-table-column>
    <kb-table-column
      :label=" Kooboo.text.site.job.startTime"
      prop="startTime"
    ></kb-table-column>
    <kb-table-column :label="Kooboo.text.site.job.repeat">
      <template v-slot="row">
        <span :class="['label', row.isRepeat.class]">{{
          row.isRepeat.text
        }}</span>
      </template>
    </kb-table-column>
  </kb-table>
  <kb-table :data="tableData" v-else key="completed-failed">
    <kb-table-column
      :label="Kooboo.text.site.job.jobName"
      prop="jobName"
    ></kb-table-column>
    <kb-table-column
      :label="Kooboo.text.common.description"
      prop="description"
    ></kb-table-column>
    <kb-table-column
      :label="Kooboo.text.site.job.executionTime"
      prop="executionTime"
    ></kb-table-column>
    <kb-table-column
      :label="Kooboo.text.site.job.message"
      prop="message"
    ></kb-table-column>
  </kb-table>
  <div
    v-kb-modal="showJobDialog"
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
    id="job_modal"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button class="close" @click="onHideJobDialog"
            ><i class="fa fa-close"></i
          ></button>
          <h4 class="modal-title">Add a job</h4>
        </div>
        <div class="modal-body">
          <div class="form-horizontal">
            <div class="form-group">
              <label class="control-label col-md-2">Name</label>
              <div class="col-md-10">
                <input type="text" class="form-control" v-model="jobName" />
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-2">Start time</label>
              <div class="col-sm-10">
                <input
                  type="text"
                  class="form-control"
                  v-model="startTime"
                  v-kb-datetimepicker="{ startDate: startDate }"
                  readonly
                />
              </div>
            </div>
            <div class="form-group">
              <div class="col-sm-10 col-sm-offset-2">
                <label class="checkbox-inline"
                  ><input type="checkbox" v-model="repeat" />Repeat</label
                >
              </div>
            </div>
            <div class="form-group" v-show="repeat">
              <label class="control-label col-sm-2">Every</label>
              <div class="col-sm-10">
                <div class="form-inline">
                  <input
                    type="number"
                    class="form-control"
                    value="1"
                    min="0"
                    v-model.number="frequenceUnit"
                  />
                  <select class="form-control" v-model="frequence">
                    <option value="Second">seconds</option>
                    <option value="Minutes">minutes</option>
                    <option value="Hour">hours</option>
                    <option value="Day">days</option>
                    <option value="Week">weeks</option>
                    <option value="Month">months</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="form-group">
              <label class="control-label col-md-2">Execute Code</label>
              <div class="col-md-10">
                <a
                  v-for="(code, index) in scheduleJobCode"
                  :key="index"
                  href="javascript:;"
                  class="btn"
                  :class="{ 'btn-default': !code.selected, 'blue': code.selected }"
                  @click="selectCode(code)"
                >
                  <i class="fa fa-code"></i>
                  {{ code.name }}
                </a>
                <p
                  v-if="scheduleJobCode.length == 0"
                  class="form-control-static"
                  >No code available</p
                >
              </div>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn green" @click="onSaveJob">Save</button>
          <button class="btn gray" @click="onHideJobDialog">Cancel</button>
        </div>
      </div>
    </div>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/components/kbTable.js",
      "/_Admin/Scripts/components/kbBreadcrumb.js",
      "/_Admin/Scripts/lib/moment.min.js",
      "/_Admin/Scripts/lib/bootstrap-datetimepicker.js",
      "/_Admin/Scripts/components/kbDatetimepicker.js"
    ]);
    Kooboo.loadCSS(["/_Admin/Styles/bootstrap-datetimepicker.min.css"]);
  })();
</script>
<script src="/_Admin/View/System/Jobs.js"></script>
